<style lang="less">
     @import './index.less';
</style>

<template>
  <div>
    <Button icon="reply" type="text" @click="goForward">上一步</Button>
    <Card>
      <Row :gutter="10">
        <i-col span="18">
          <div style="padding:10px">
            <h2>{{invoiceInfo.invoice_title}}
              <Tag color="blue" type="border" class="margin-left-10 margin-bottom-8">{{invoiceInfo.status}}</Tag>
            </h2>
            <p>所属公司：{{invoiceInfo.customer_name}}</p>
            <p>发票类型：{{invoiceInfo.invoice_type}}</p>
          </div>
        </i-col>
      </Row>
    </Card>
    <Row :gutter="10" class="margin-top-10">
      <i-col span="17">
        <Card dis-hover>
          <Tabs value="name1">
            <TabPane label="基本信息" name="name1">
              <Form :model="invoiceInfo"  :label-width="110" label-position="right">
                <Row>
                  <i-col span="9" offset="2">
                    <FormItem label="发票名称" prop="invoice_title">
                      <Input v-model="invoiceInfo.invoice_title" disabled></Input>
                    </FormItem>
                  </i-col>
                  <i-col span="9" offset="2">
                    <FormItem label="申请日期">
                      <DatePicker type="date" placement="bottom-end" disabled v-model="invoiceInfo.create_time"></DatePicker>
                    </FormItem>
                  </i-col>
                </Row>
                <Row>
                  <i-col span="9" offset="2">
                    <FormItem label="开据发票类型" prop="invoice_type">
                      <Select clearable  v-model="invoiceInfo.invoice_type" disabled>
                        <Option value="增值税普通发票">增值税普通发票</Option>
                        <Option value="增值税专用发票">增值税专用发票</Option>
                      </Select>
                    </FormItem>
                  </i-col>
                  <i-col span="9" offset="2">
                    <FormItem label="开票日期" prop="invoice_date">
                      <DatePicker type="date" placement="bottom-end" ref="invoiceDate" disabled v-model="invoiceInfo.invoice_date"></DatePicker>
                    </FormItem>
                  </i-col>
                </Row>
                <div class="division-tips">
                  <Button type="text" icon="arrow-up-b" v-show="customerRow" @click="customerRow = !customerRow"></Button>
                  <Button type="text" icon="arrow-down-b" v-show="!customerRow" @click="customerRow = !customerRow"></Button>
                  <span>开票单位信息</span>
                </div>
                <div v-show="customerRow">
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="客户名称" >
                          <Input disabled v-model="invoiceInfo.customer_name" disabled></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="9" offset="2">
                        <FormItem label="客户地址">
                          <Input disabled v-model="companyInfo.address"></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="纳税人识别号">
                          <Input disabled v-model="companyInfo.tax_num"></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="9" offset="2">
                        <FormItem label="客户电话">
                          <Input disabled v-model="companyInfo.phone_num"></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="开户行账号">
                          <Input disabled v-model="companyInfo.bank_account"></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="9" offset="2">
                        <FormItem label="开户行">
                          <Input disabled v-model="companyInfo.bank"></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                </div>
                <div class="division-tips">
                  <Button type="text" icon="arrow-up-b" v-show="contractRow" @click="contractRow = !contractRow"></Button>
                  <Button type="text" icon="arrow-down-b" v-show="!contractRow" @click="contractRow = !contractRow"></Button>
                  <span>开票合同信息</span>
                </div>
                <div v-show="contractRow">
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="合同编号" prop="contract_id">
                          <Input disabled v-model="contractInfo.contract_number"></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="9" offset="2">
                        <FormItem label="合同金额">
                          <Input disabled v-model="contractInfo.contract_amount"></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="签约时间">
                          <Input disabled v-model="contractInfo.contract_date"></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="9" offset="2">
                        <FormItem label="合同时间">
                          <Input disabled v-model="contractInfo.contract_start_date"></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="累计回款金额">
                          <Input disabled v-model="contractInfo.historyPayment"></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="9" offset="2">
                        <FormItem label="累计开票金额">
                          <Input disabled v-model="contractInfo.historyInvoice"></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="合同负责人">
                          <Input disabled v-model="contractInfo.responsible_name"></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                </div>
                <div class="division-tips">
                  <Button type="text" icon="arrow-up-b" v-show="ticketRow" @click="ticketRow = !ticketRow"></Button>
                  <Button type="text" icon="arrow-down-b" v-show="!ticketRow" @click="ticketRow = !ticketRow"></Button>
                  <span>开票项目</span>
                </div>
                <div v-show="ticketRow">
                  <Row>
                    <i-col span="6">
                      <FormItem label="名称" prop="item_type">
                        <Input v-model="invoiceInfo.item_type" disabled></Input>                        
                      </FormItem>
                    </i-col>
                    <i-col span="6">
                      <FormItem label="数量" prop="item_count">
                        <Input v-model="invoiceInfo.item_count" disabled></Input>

                      </FormItem>
                    </i-col>
                    <i-col span="6" pull="1">
                      <FormItem label="单价(元)" prop="price">
                        <Input v-model="invoiceInfo.price" disabled></Input>
                      </FormItem>
                    </i-col>
                    <i-col span="6" pull="1">
                      <FormItem label="开票金额(元)" prop="invoice_amount">
                        <Input v-model="invoiceInfo.invoice_amount" disabled></Input>
                      </FormItem>
                    </i-col>
                  </Row>
                  <Table :columns="tableColumns" :data="receivables" disabled class="margin-bottom-10"></Table>
                </div>
                <div class="division-tips">
                  <Button type="text" icon="arrow-up-b" v-show="addressRow" @click="addressRow = !addressRow"></Button>
                  <Button type="text" icon="arrow-down-b" v-show="!addressRow" @click="addressRow = !addressRow"></Button>
                  <span>开票邮寄地址</span>
                </div>
                <div v-show="addressRow">
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="收件人">
                          <Input v-model="invoiceInfo.receiver" disabled></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="9" offset="2">
                        <FormItem label="联系电话">
                          <Input v-model="invoiceInfo.phone_num" disabled></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                    <Row>
                      <i-col span="9" offset="2">
                        <FormItem label="邮寄地址">
                          <Input v-model="invoiceInfo.address" disabled></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="9" offset="2">
                        <FormItem label="邮政编码">
                          <Input v-model="invoiceInfo.postcode" disabled></Input>
                        </FormItem>
                      </i-col>
                    </Row>
                </div>
              </Form>
            </TabPane>
          </Tabs>
        </Card>
      </i-col>
      <i-col span="7">
        <Card dis-hover>
          <Tabs value="1">
              <TabPane label="动态" name="1">
                <p>这里是动态里的内容</p>
              </TabPane>
              <TabPane label="团队成员" name="2">
                <p>团队成员里的内容</p>
              </TabPane>
          </Tabs>
        </Card>
      </i-col>
    </Row>
    
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      invoice_id:'',
      invoiceInfo:{},
      indexData:{},
      customerRow:true,
      contractRow:true,
      addressRow:true,
      ticketRow:true,
      companyInfo:{},
      contractInfo:{},
      editIncell:false,
      receivables:[],
      tableColumns:[
        {
          title:'期次',
          key:'count',
          align:'center',
        },{
          title:'应收约定回款日期',
          key:'receivable_date',
          align:'center',
        },{
          title:'应收金额(元)',
          key:'receivable_amount',
          align:'center'
        },{
          title:'已开票金额(元)',
          align:'center',
          key:'invoiceSum'
        },{
          title:'未开票金额(元)',
          align:'center',
          key:'invoiceSub'
        },{
          title:'本次申请开票金额(元)',
          algin:'center',
          key:'amount',
          align:'center',
        }
      ]
    }
  },
  methods: {
    goForward() {
      this.$router.go(-1)
    },
    getInvoiceInfo() {
      this.$http.get('/fi/invoices/' + this.invoice_id).then((res) => {
        this.invoiceInfo = res.data.returnValue
        // 客户基本信息
        this.$http.get('/customer/customers/' + this.invoiceInfo.customer_id).then((res) => {
          this.companyInfo = res.data.returnValue
        })
        // 合同基本信息
        this.$http.get('/fi/contracts/' + this.invoiceInfo.contract_id).then((res) => {
          this.contractInfo = res.data.returnValue
          this.receivables = res.data.returnValue.receivables
            _.forEach(this.receivables,item => {
              this.$set(item,'invoiceSum',0),
              this.$set(item,'invoiceSub',item.receivable_amount),
              this.$set(item,'amount',0)
              _.forEach(this.invoiceInfo.receivableinvoices,i => {
                if(item.receivable_id === i.receivable_id) {
                  item.invoiceSum = item.invoiceSum + i.amount
                  item.invoiceSub = item.receivable_amount - item.invoiceSum
                  item.amount = i.amount
                  this.totalSum = this.totalSum + item.amount
                }
              })
            })
          this.$set(this.contractInfo,'historyPayment',0) // 累计回款金额
          this.$set(this.contractInfo,'historyInvoice',0) // 累计开票金额
          // 遍历计算累计回款金额
          _.forEach(this.contractInfo.receivables,item => {
            _.forEach(item.receivableBackpayments,r=> {
              this.contractInfo.historyPayment = this.contractInfo.historyPayment + r.amount
            })
          })
          // 遍历计算累计开票金额
          _.forEach(this.contractInfo.invoices,item => {
            if(item.status === '审核通过') {
              this.contractInfo.historyInvoice = this.contractInfo.historyInvoice + item.invoice_amount
            }
          })
        })
      })
    },
  },
  mounted() {
    this.invoice_id = this.$route.params.id
    this.getInvoiceInfo()

  }
}
</script>

